<template>
	<div id="app">
		<div class="nav">
			<!-- <router-link to="/"></router-link> -->
			<!-- <router-link to="/about">About</router-link> -->
			<router-view />
		</div>
		<div class="foot">
			<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
				<van-tabbar-item replace to="/">
					<span>首页</span>
					<template #icon="props">
						<img :src="icon.active1" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/dynamic">
					<span>动态</span>
					<template #icon="props">
						<img :src="icon.active2" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/complateInfo">
					<span>发布信息</span>
					<template #icon="props">
						<img :src="icon.active3" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/commission">
					<span>有佣金</span>
					<template #icon="props">
						<img :src="icon.active4" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/mine">
					<span>我发布的</span>
					<template #icon="props">
						<img :src="icon.active5" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>
<script>
export default {
	data () {
		return {
			active: 0,
			icon: {
				active1: 'http://img.chwlsq.com/4187/config/2107081356503350730.png',
				active2: 'http://img.chwlsq.com/4187/config/2107081357078807415.png',
				active3: 'http://img.chwlsq.com/4187/config/2107081359300994692.gif',
				active4: 'http://img.chwlsq.com/4187/config/2107081358362244990.png',
				active5: 'http://img.chwlsq.com/4187/config/2107081359067400569.png'

			},
		};
	},
};
</script>


<style>
body,
p,
ul,
ol,
li {
	margin: 0;
	padding: 0;
}
ul,
ol,
li,
img {
	list-style: none;
}
html {
	height: 100%;
}
body {
	position: relative;
	width: 100%;
	height: 100%;
}
#app {
	position: relative;
	width: 100%;
	height: 100%;
}
.foot{
width: 100%;
height: 68px;
line-height: 68px;
}
</style>
